<template>
  <div class="dashboard-container">
    <aside class="aside-style">
      <el-row>
        <el-col :span="5">
          <el-select v-model="status" placeholder="请选择" size="mini" @change="statusChange">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="addDepartment">新增</el-button>
        </el-col>
      </el-row>
    </aside>
    <el-table
      :data="list"
      border
      style="width: 100%;margin-top:20px;"
    >
      <el-table-column
        prop="department"
        label="部门名称"
        align="center"
      />
      <el-table-column
        prop="d_integral"
        label="部门积分"
        width="180"
        align="center"
      />
      <el-table-column
        label="状态"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          {{ scope.row.status === '200' ? '正常' : '冻结' }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '200'" type="text" size="mini" @click="resetDepartment(scope.row)">修改</el-button>
          <el-button v-if="scope.row.status === '200'" type="text" size="mini">结算</el-button>
          <el-button type="text" size="mini" @click="forzenFun(scope.row)">{{ scope.row.status === "200" ? "冻结" : "解冻" }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <department-info ref="d-info" @reloadFun="reloadFun" />
  </div>

</template>

<script>
import { getDepartmentListApi, frozenDepartmentApi } from '@/api/main'
import departmentInfo from './components/department-info'
export default {
  components: {
    departmentInfo
  },
  data() {
    return {
      list: [],
      status: 200,
      statusList: [
        {
          label: '正常',
          value: 200
        },
        {
          label: '已冻结',
          value: 401
        }
      ]
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    reloadFun() {
      this.getDepartmentList()
    },
    addDepartment() {
      this.$refs['d-info'].dialogVisible = true
      this.$refs['d-info'].title = '新增'
      this.$refs['d-info'].department_id = ''
      this.$refs['d-info'].form.department = ''
    },
    resetDepartment(row) {
      this.$refs['d-info'].dialogVisible = true
      this.$refs['d-info'].title = '修改'
      this.$refs['d-info'].department_id = row.id
      this.$refs['d-info'].form.department = row.department
    },
    statusChange() {
      this.getDepartmentList()
    },
    getDepartmentList() {
      const data = {
        status: this.status
      }
      getDepartmentListApi(data).then(res => {
        if (res.code === 200) {
          this.list = res.list
        }
      })
    },
    forzenFun(row) {
      let msg = ''
      if (row.status === '200') {
        msg = '冻结部门 [' + row.department + ']'
      } else {
        msg = '解除对部门 [' + row.department + '] 的冻结'
      }
      this.$confirm('此操作将' + msg + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: row.id
        }
        frozenDepartmentApi(data).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getDepartmentList()
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }
    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>
